<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
        }
        input{
            margin-bottom: 10px;
        }
        button{
            margin-bottom: 10px;
            border-radius: 5px;
            border: none;
        }
        td{
            text-align-last: center;
        }
    </style>
</head>
<body>
    <div style="width: 600px;">
        <div class="head">
        姓名：<input type="text" id="userName"/>
        <br />
        年龄：<input type="text" id="age"/>
        <br />
        性别：<input type="text" id="xingbie"/
        ><br />
        爱好：<input type="text" id="aihao"/>
        <br />
        <button type="button" onclick="add()">添加</button>
    </div>
    <table align="center" width="600px" height="50px" border="1px" bgcolor="salmon" cellspacing="0">
        <thead>
            <tr align="center">
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>爱好</td>
                <td align="center">操作</td>
            </tr>
        </thead>
           <tbody>
                <!--<tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>
                    <button type="button" class="a1" onclick="btn1">上移</button>
                    <button type="button" class="a2" onclick="btn2">删除</button>
                    <button type="button" class="a3" onclick="btn3">下移</button>
                    
                </td>
            </tr>-->
           </tbody>
   
    </table>
    </div>
    
    <script>
        var userName = document.getElementById('userName');
        var age = document.getElementById('age');
        var xingbie = document.getElementById('xingbie');
        var aihao = document.getElementById('aihao');
        var tbody = document.querySelector('tbody');
        var arr= [];
        
        window.onload = function(){
            var getarr=localStorage.arrdate;
            if(getarr){
                arr=JSON.parse(getarr);
                show(arr);
            }
        }
        
        // 添加功能
        function add(){
            var obj = {
                id: +new Date(),
                userName:userName.value,
                age:age.value,
                xingbie:xingbie.value,
                aihao:aihao.value
            };
            arr.push(obj);
            userName.value="";
            age.value="";
            xingbie.value="";
            aihao.value="";
            localStorage.arrdate = JSON.stringify(arr);
            //渲染页面
            show(arr);
            
        }
        
        function show(arr){
            var str = "";
            for(var i=0; i<arr.length; i++){
                str += `<tr>
                            <td>${i+1}</td>
                            <td>${arr[i].userName}</td>
                            <td>${arr[i].age}</td>
                            <td>${arr[i].xingbie}</td>
                            <td>${arr[i].aihao}</td>
                            <td>
                                <button type="button" class="a1" onclick="btn1(${arr[i].id})">上移</button>
                                <button type="button" class="a2" onclick="btn2(${arr[i].id})">删除</button>
                                <button type="button" class="a3" onclick="btn3(${arr[i].id})">下移</button>
                                
                            </td>
                        </tr>`;
            }
            tbody.innerHTML = str;
        }
        
        // 删除功能
        function btn2(id){
            for(var i=0; i<arr.length;i++){
                if(id==arr[i].id){
                    arr.splice(i,1);
                    arrdate=JSON.stringify(arr)
                    localStorage.arrdate=arrdate;
                }
            }
            show(arr)
        }
        
        // 上移功能
        function btn1(id){
            var a;
            for(var i=0; i<arr.length; i++){
                if(id == arr[i].id){
                    if(i > 0){     // 判断表格中第一行不能再上移了
                        a = arr.splice(i,1);
                        arr.splice(i-1,0,a[0]) // 应为打印出的是一个数组   所以a[0]  提取
                    } else {
                        alert("亲  不能再上移啦");
                    }
                    
                }
            }
            localStorage.arrdate = JSON.stringify(arr);
            show(arr);
        }
        
        // 下移功能
        function btn3(id){
            var a;
            for(var i=0; i<arr.length; i++){
                if(id == arr[i].id){
                    if(i < arr.length){
                        a = arr.splice(i,1);
                        arr.splice(i+1,0,a[0]);
                        break;
                    } else {
                        alert("亲  不能再下移啦");
                    }
                }
            }
            localStorage.arrdate = JSON.stringify(arr);
            show(arr);
        }
        
            
    </script>
    
</body>
</body>
</html>
